<template>
  <div class="info">
    <van-nav-bar class="top" left-arrow @click-left="onClickLeft">
      <template #left>
        <span class="iconfont">&#xe632;</span>
      </template>
      <template #title>
        <span class="gerenxinxi">个人信息</span>
      </template>
    </van-nav-bar>
    <my-cell title="头像" class="img" type="img" @click.native="toImage">
    </my-cell>
    <my-cell
      title="昵称"
      class="name"
      :value="userInfo.name"
      @click.native="toName(userInfo.name)"
    >
    </my-cell>
    <my-cell
      title="介绍"
      class="introduce"
      @click.native="toInfoIntroduce"
    ></my-cell>
    <my-cell
      title="性别"
      class="sex"
      :value="sexObj[userInfo.gender]"
      @click.native="showGender = true"
      is-link
    ></my-cell>
    <my-cell
      title="生日"
      class="birthday"
      value="1994-01-04"
      @click.native="showDate = true"
    ></my-cell>

    <!-- 性别选择 -->
    <van-popup v-model="showGender" position="bottom">
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(sexObj)"
        :default-index="userInfo.gender"
        @cancel="showGender = false"
        @confirm="genderConfirm"
      ></van-picker>
    </van-popup>
    <!-- 修改日期 -->
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showDate = false"
        @confirm="genderDare"
      />
    </van-popup>
  </div>
</template>

<script>
import myCell from '../my/myCell.vue'
import { mapState, v10User } from 'vuex'
import { Profile } from '@/api/my.js'
export default {
  components: { myCell },
  name: 'info',
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      list: [], // 头像上传
      sexObj: {
        0: '男',
        1: '女'
      },
      showGender: false,
      showDate: false,
      minDate: new Date(1800, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  methods: {
    // 点击左边箭头跳转到my页面
    onClickLeft () {
      this.$router.push('/my')
    },
    // 跳转到上传头像页面
    toImage () {
      this.$router.push('/infoUploader')
    },
    // 点击昵称跳转到修改昵称页面
    toName (str) {
      this.$router.push(`/infoName?str=${str}`)
    },
    // 跳转到个人介绍页面
    toInfoIntroduce () {
      this.$router.push('/infoIntroduce')
    },
    // 性别选择确定
    genderConfirm (value, index) {
      // 点击确认按钮触发vuex中的更新数据
      this.$store.dispatch('refreshUserInfo')
      console.log(value)
      console.log('index', index)
      // 点击确定隐藏弹框
      this.showGender = false
      Profile({
        gender: index
      }).then(() => {
        // 提示用户修改成功
        this.$toast.success('修改成功')
        // 更新用户信息
        v10User()
          .then(res => {
            console.log('个人信息', res)
            this.$store.commit('setUserInfo', res.data.data)
            // 修改登录状态
            this.store.commit('setIsLogin', true)
          })
          .catch(() => {})
      })
    },
    // 编辑用户信息
    editInfo (obj) {
      // 显示loading
      this.$toast.loading({
        duration: 0
      })
      Profile(obj).then(() => {
        this.$toast.success('修改资料成功')
        // 更新vuex中的userInfo
        this.$store.dispatch('refreshUserInfo')
      })
    },
    // 修改时间选择
    genderDare () {
      // 选择后隐藏
      this.showDate = false
    }
  },
  // 计算属性
  computed: {
    ...mapState(['userInfo'])
  }
  // 调用接口，我在vuex中的actions(异步操作)中调用接口和保存数据，然后在created勾子中一进来就触发  this.$store.dispatch('refreshUserInfo')触发vuex中的actions中的方法
}
</script>

<style lang="less" scoped>
.info {
  .top {
    background-color: #d0584d;
    color: #fff;
  }
  .baocun {
    color: #fff;
  }
  .gerenxinxi {
    color: #fff;
  }
}
</style>
